<template>
    <div>
        <el-container>
            <el-header style="margin-left:100px">


                <SearchBar></SearchBar>

            </el-header>
            <el-main style="text-align:center; width:800px; float: left;display: inline; margin-left:100px">

                <div>
                    <div v-for="(data,index) in SearchCommodity " :key="data.id" style="float:left; margin-right:10px">

                        <ShopCard :ShopName=data.ShopName :free_shipping=data.free_shipping :id = data.id
                                  :payment=data.payment :photo=data.photo :price=data.price :title=data.title
                                  :index = "index" :data_name=data_name
                                  ></ShopCard>
                    </div>
                </div>


            </el-main>
            <el-footer>
                <Pagination :all_page=all_page></Pagination>

            </el-footer>
        </el-container>



    </div>

</template>

<script>
    // @ is an alias to /src
    // import ShopCard from '@/components/ShopCard.vue'
    import SearchBar from '@/components/SearchBar.vue'
    import ShopCard from '@/components/ShopCard.vue'
    import Pagination from '@/components/Pagination.vue'

    import {mapState} from 'vuex'
    import { mapGetters } from 'vuex'
    export default {

        name: 'Home',
        data() {
            return {
                data_name:"SearchCommodity_"
            }
        },
        components: {
            SearchBar,
            ShopCard,
            Pagination,
        },
        methods: {



        },

        created() {


        },
        computed: {

            ...mapState(['SearchCommodity']),


            all_page(){
                return Math.ceil(this.CommodityCount/12)
            },

        }
    }
</script>

<style acoped>

    hr{
        clear:both;
    }
    </style> -->